<template>
  <div class="download">
    <div class="down-grid">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <div class="light-green">
            <div class="light-green-content">
              <div class="light-green-content-d">
                <n-avatar :size="108" :src="app.icon" />
              </div>
              <div class="light-green-content-d">
                <n-gradient-text
                  :size="24"
                  :gradient="{
                    deg: 180,
                    from: 'rgb(85, 85, 85)',
                    to: 'rgb(170, 170, 170)',
                  }"
                  >{{ app.name }}</n-gradient-text
                >
              </div>
              <div class="light-green-content-d">
                <n-space>
                  <n-ellipsis>版本: {{ app.version }}</n-ellipsis>
                  <n-ellipsis>大小: {{ app.packageOutputDto.displaySize }}</n-ellipsis>
                </n-space>
                <div>
                  <n-ellipsis>发布日期: {{ app.packageOutputDto.displayTime }}</n-ellipsis>
                </div>
              </div>
              <div class="light-green-content-d">
                <n-button
                  strong
                  round
                  type="success"
                  @click="download(app.packageOutputDto.downloadUrl)"
                >
                  <template #icon>
                    <n-icon>
                      <AndroidFilled />
                    </n-icon>
                  </template>
                  下载安装</n-button
                >
              </div>
            </div>
          </div>
        </n-gi>
        <n-gi>
          <div class="green">
            <div class="green-qrcode-img">
              <qrcode-vue :value="qrValue" :size="qrSize" level="H" />
              <div>
                <n-gradient-text type="info" :size="14">请扫描二维码下载APP</n-gradient-text>
              </div>
            </div>
            <img src="@/assets/images/ic_mobilphone.png" alt="" />
          </div>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { AndroidFilled } from '@vicons/antd';
  import { useRoute } from 'vue-router';
  import { appPreview } from '@/api/apps/app';
  import QrcodeVue from 'qrcode.vue';
  import { ref, onMounted } from 'vue';
  const route = useRoute();
  const shortCode = ref();
  const app = ref({
    icon: '',
    name: '',
    version: '',
    packageOutputDto: {
      downloadUrl: '',
      displaySize: '',
      displayTime: '',
    },
  });
  const qrValue = ref('');
  const qrSize = ref(0);
  const download = (downloadUrl) => {
    window.location.href = downloadUrl;
  };
  onMounted(async () => {
    if (route.query.code) {
      shortCode.value = route.query.code;
    }
    const result = await appPreview(shortCode.value);
    app.value = result.data;
    qrValue.value = app.value.packageOutputDto.downloadUrl;
    qrSize.value = 140;
  });
</script>

<style lang="less" scoped>
  .download {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
  }
  @media (min-width: 768px) {
    .download {
      background-image: url('@/assets/images/login.svg');
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
    }
  }
  .down-grid {
    display: flex;
    width: 808px;
    margin: 200px 0px 0px 500px;
  }
  .light-green {
    height: 208px;
  }
  .green {
    height: 508px;
    // background-color: rgba(0, 128, 0, 0.24);
    &-qrcode-img {
      position: absolute;
      margin: 100px 0px 0px 70px;
    }
  }
  .light-green-content {
    margin-left: 80px;
    &-d {
      margin-top: 20px;
    }
  }
</style>
